import React from 'react'
import style from './style'
import { TitleBar, Nav, Link, info } from '../../ui-components'
import MessageBlock from '../app/MessageBlock'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as appAction from '../../actions/app.action'
import cx from 'classnames'
import util from '../../util'
import moment from 'moment'
moment.locale('zh-cn')

export default
@connect(({home}) => ({home}), dispatch => ({actions: bindActionCreators({...appAction}, dispatch)}))
class Notification extends React.Component {

  pageSize=30
  pageNumber=1
  handlePageChange(_pageNumber) {
    const { pageNumber, ...others } = this.props.location.query
    this.props.router.push(`/notifications?pageNumber=${_pageNumber}&${util.body(others)}`)
  }
  doFetch(props) {
    info('读取中...', true)
    const nowProps = props || this.props;
    const pageNumber = nowProps.location.query.pageNumber || this.pageNumber
    nowProps.fetchNotificationList({
      pageNumber,
      pageSize: this.pageSize
    }, () => {
      info()
    })
  }
  componentWillReceiveProps(nextProps) {
    if (!util.isShallowEqual(nextProps.location.query, this.props.location.query)){
      this.doFetch(nextProps)
    }
  }
  componentDidMount() {
    this.doFetch()
    this.props.actions.fetchUnreadNumber()
  }

  renderPagin(totalNumber) {
    const pageNumber = this.props.location.query.pageNumber || this.pageNumber
    const pageLength = Math.ceil(totalNumber/this.pageSize)
    if (pageLength <= 1) return null
    return (
      <div className={style.pagin}>
        <Link label="首页" onClick={() => this.handlePageChange(1)}/>
        <ul>
          {
            new Array(pageLength+1).join('0').split('')
              .map((v, i) => {
                return (
                  <li key={i}>
                    <Link 
                      onClick={() => this.handlePageChange(i+1)}
                      className={cx({ 
                        [style.active]: pageNumber == i+1 
                      })}
                      noHover={pageNumber == i+1}
                      label={i+1}/>
                  </li>
                )
              })
          }
        </ul>
        <Link label="末页" onClick={() => this.handlePageChange(pageLength)}/>
      </div>
    )
  }

  render() {
    const { notificationList } = this.props.home
    const {totalNumber=0, messageObject=[]} = notificationList

    return (
      <div style={{margin: '0 auto'}}>
        <div className={style.root}>
          <div className={style.content}>
            <div className={style.notifications}>
              <TitleBar label="全部消息"/>
              {
                messageObject.map((v, i)=>{
                  return (
                    <div key={i} style={{borderBottom: '1px solid #eee', paddingBottom: '20px'}}>
                      <div className={style.notif_date}>{v.date}</div>
                      <ul className={style.message_list}>
                      {
                        v ? v.messages.map((v,i) => {
                          return <MessageBlock key={i} msg={v} />
                        }) : null
                      }
                      </ul>
                    </div>
                  )
                })
              }
              {
                this.renderPagin(totalNumber)
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}
